<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <link href="style.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  </head>
  <body ng-app="app">
    <div ng-controller="ListController" class="championList">
      <div>
        <span class="list-group-item title">
          <span>Year</span>
          <span class="titleDisplayName">Name of world champion</span>
        </span>
      </div>
      <div ng-repeat="championData in championsData">
        <a
          class="list-group-item championItem"
          href="#"
          ng-click="toggleItemExpansion(championData.year)"
          ng-class="{'highlighted': championData.year === highlightedYear}"
        >
          <span class="year">{{championData.year}}</span>
          <span class="displayName">{{championData.displayName}}</span>
          <span
            class="rightHandIcon glyphicon"
            ng-class="{'glyphicon-plus': championData.year !== highlightedYear, 'glyphicon-minus': championData.year === highlightedYear}"
          />
        </a>
        <div
          ng-class="{'hide': championData.year !== highlightedYear}"
          class="winnerList"
        >
          <div>
            <span class="list-group-item title">
              <span class="titleRound">Round</span>
              <span class="titleDisplayName">Name of winner</span>
            </span>
          </div>
          <div
            ng-repeat="winnerData in winnersData[championData.year]"
            ng-class="{'highlighted': championData.displayName === winnerData.displayName}"
            class="list-group-item winnerItem"
          >
            <span class="round">{{winnerData.round}}</span>
            <span class="displayName">{{winnerData.displayName}}</span>
            <span
              class="rightHandIcon glyphicon"
              ng-class="{'glyphicon-king': championData.displayName === winnerData.displayName}"
            />
          </div>
        </div>
      </div>
    </div>
    <script src="js/app.js"></script>
  </body>
</html>
